<template>
  <div>
    <el-container>
      <el-main>
        <el-container class="parent-body">
          <el-header class="content-header">
            关键词排行
            <div class="rightTop">
              <el-button @click="OutData()">导出数据</el-button>
              <el-button @click="seven(1)" class="response">
                最近7天
              </el-button>
              <span />
              <el-button @click="thirty(2)" class="response"
                >最近30天</el-button
              >
              <span />
              <el-button @click="ninety(3)" class="response"
                >最近90天</el-button
              >

              <el-date-picker
                v-model="value1"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </div>
          </el-header>
          <el-main>
            <div style="margin-left: 70px; margin-top: 30px">
              统计页面:
              <el-select v-model="value" value-key="all">
                <el-option
                  v-for="item in statisticsPage"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                  <span>{{ item.label }}</span>
                </el-option>
              </el-select>
            </div>
            <div id="pageFlow" class="flow"></div>
          </el-main>
        </el-container>
      </el-main>
      <el-footer>
        <el-container class="parent-body">
          <el-header class="content-header">
            各个端口浏览占比
            <div class="rightTop">
              <el-button @click="yesterday(4)">昨天</el-button>
              <el-button @click="seven2(5)" class="response">
                最近7天
              </el-button>
              <span />
              <el-button @click="thirty2(6)" class="response"
                >最近30天</el-button
              >
              <span />
              <el-button @click="ninety2(7)" class="response"
                >最近90天</el-button
              >

              <el-date-picker
                v-model="value2"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </div>
          </el-header>
          <el-main>
            <div style="margin-left: 70px; margin-top: 30px">
              统计类型:
              <el-select v-model="value0" value-key="Views">
                <el-option
                  v-for="item in statisticsType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                  <span>{{ item.label }}</span>
                </el-option>
              </el-select>
            </div>
            <div
              id="portPercentage"
              class="flow"
              style="width: 700px;text-align:top"
            ></div>
          </el-main>
        </el-container>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
export default {
  name: "Flow",
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit("pick", [start, end])
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit("pick", [start, end])
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit("pick", [start, end])
            }
          }
        ]
      },
      value0: "",
      value2: [new Date(2018, 7, 1, 8, 40), new Date(2018, 7, 7, 8, 40)],
      value1: [new Date(2018, 7, 1, 8, 40), new Date(2018, 7, 7, 8, 40)],
      value: "",
      statisticsPage: [
        {
          value: "all",
          label: "全站"
        },
        {
          label: "商品首页",
          value: "goodHome"
        },
        {
          label: "商品分类页",
          value: "goodClass"
        },
        {
          label: "商品详情页",
          value: "goodDetils"
        }
      ],
      statisticsType: [
        {
          value: "Views",
          label: "浏览次数（PV）"
        },
        {
          label: "独立访客（UV）",
          value: "visitor"
        }
      ],
      tableParams: {
        beginDate: new Date(2018, 7, 1, 8, 40),
        endDate: new Date(2018, 7, 7, 8, 40)
      },
      tableParams2: {
        beginDate: new Date(2018, 7, 1, 8, 40),
        endDate: new Date(2018, 7, 7, 8, 40)
      }
    }
  },
  mounted() {
    this.FlowChart(), this.PortChart()
  },
  methods: {
    OutData() {
      alert("导出数据")
    },
    yesterday(i) {
      var btn = document.getElementsByTagName("el-button") //获取按钮
      btn[i].onclick = function() {
        btn[i].style.backgroundColor = "blue"
        btn[i].style.color = "white"
      }
    },
    seven(i) {
      var btn = document.getElementsByTagName("el-button") //获取按钮
      btn[i].onclick = function() {
        btn[i].style.backgroundColor = "blue"
        btn[i].style.color = "white"
      }
    },
    seven2(i) {
      var btn = document.getElementsByTagName("el-button") //获取按钮
      btn[i].onclick = function() {
        btn[i].style.backgroundColor = "blue"
        btn[i].style.color = "white"
      }
    },
    thirty(i) {
      var btn = document.getElementsByTagName("el-button") //获取按钮
      btn[i].onclick = function() {
        btn[i].style.backgroundColor = "blue"
        btn[i].style.color = "white"
      }
    },
    thirty2(i) {
      var btn = document.getElementsByTagName("el-button") //获取按钮
      btn[i].onclick = function() {
        btn[i].style.backgroundColor = "blue"
        btn[i].style.color = "white"
      }
    },
    ninety(i) {
      var btn = document.getElementsByTagName("el-button") //获取按钮
      btn[i].onclick = function() {
        btn[i].style.backgroundColor = "blue"
        btn[i].style.color = "white"
      }
    },
    ninety2(i) {
      var btn = document.getElementsByTagName("el-button") //获取按钮
      btn[i].onclick = function() {
        btn[i].style.backgroundColor = "blue"
        btn[i].style.color = "white"
      }
    },
    FlowChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("pageFlow"))
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "页面流量"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["浏览次数（PV）", "独立访客（UV）"],
          bottom: -5,
          left: "center"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "2018-08-01",
            "2018-08-02",
            "2018-08-03",
            "2018-08-04",
            "2018-08-05",
            "2018-08-06",
            "2018-08-07"
            // this.tableParams.beginDate,
            // new Date.setTime(this.tableParams.beginDate + 3600 * 1000 * 24),
            // new Date.setTime(this.tableParams.beginDate + 3600 * 1000 * 24 * 2),
            // new Date.setTime(this.tableParams.beginDate + 3600 * 1000 * 24 * 3),
            // new Date.setTime(this.tableParams.beginDate + 3600 * 1000 * 24 * 4),
            // new Date.setTime(this.tableParams.beginDate + 3600 * 1000 * 24 * 5),
            // this.tableParams.endDate
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "浏览次数（PV）",
            type: "line",
            stack: "总量",
            data: [50, 132, 301, 625, 400, 330, 210]
          },
          {
            name: "独立访客（UV）",
            type: "line",
            stack: "总量",
            data: [20, 112, 191, 134, 170, 130, 110]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    PortChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(
        document.getElementById("portPercentage")
      )
      // 指定图表的配置项和数据
      let option = {
        title: {},
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          bottom: 70,
          left: "right",
          data: ["pc端", "微信端", "app", "其他"]
        },
        series: [
          {
            name: "各个端口浏览占比",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 735, name: "pc端" },
              { value: 310, name: "微信端" },
              { value: 34, name: "app" },
              { value: 135, name: "其他" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  },
  watch: {
    value1: function(newVal, oldVal) {
      console.log(oldVal)
      if (newVal !== null) {
        this.tableParams.beginDate = newVal[0]
        this.tableParams.endDate = newVal[1]
      } else {
        this.tableParams.beginDate = null
        this.tableParams.endDate = null
      }
    },
    value2: function(newVal, oldVal) {
      console.log(oldVal)
      if (newVal !== null) {
        this.tableParams2.beginDate = newVal[0]
        this.tableParams2.endDate = newVal[1]
      } else {
        this.tableParams2.beginDate = null
        this.tableParams2.endDate = null
      }
    }
  }
}
</script>
<style scoped>
/* .response {
} */
.flow {
  margin-left: 70px;
  margin-top: 40px;
  width: 1000px;
  height: 600px;
  text-align: center;
}
</style>
